<template>
    <div class="content">
        <ExamCell :one="one"/>
        <div class="student-list">
            <Form inline :label-width="5">
                <FormItem>
                    <Input
                        v-model="params.nameOrNo"
                        placeholder="请输入学生姓名/学号"
                    ></Input>
                </FormItem>
                <FormItem>
                    <Select
                        v-model="params.status"
                        placeholder="状态"
                        style="width:100px"
                        clearable
                    >
                        <Option
                            v-for="(item, k) in stuExamStatus"
                            :key="k"
                            :value="k"
                        >{{ item }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select
                        v-model="params.classId"
                        placeholder="班级"
                        style="width:100px"
                        clearable
                    >
                        <Option v-for="item in classList" :key="item.classId" :value="item.classId">{{item.className}}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="search">搜索</Button>
                </FormItem>
                <FormItem>
                    <Button @click="clearSearch">清空</Button>
                </FormItem>
            </Form>
            <Table
                :data="list"
                :columns="columns"
                bo
                rder
                align="center"
            >
                <template slot-scope="{ row }" slot="status">
                    <span>{{stuExamStatus[row.status]}}</span>
                </template>
                <template slot-scope="{ row }" slot="action">
                    <div class="table-action">
                        <Button :disabled="row.status==0||row.status==1" type="text" @click="handleView(row)">阅卷</Button>
                        <Button :disabled="row.status==0" type="text" @click="handleStop(row)">强制收卷</Button>
                    </div>
                </template>
            </Table>
            <Pagination
                :pageSize.sync="params.pageSize"
                :current.sync="params.pageNum"
                :total="params.total"
                @change="queryList"
            />
        </div>
    </div>
</template>
<script>
import { examStatus, stuExamStatus } from '@/libs/enums'
import ExamCell from './components/exam-cell'

import { getExamDetail, forceExam } from '@/api/paper'

export default {
    components: {
        ExamCell
    },
    inject: ['nextPageReload'],
    data () {
        return {
            sType: examStatus,
            one: {},
            classList: [],
            stuExamStatus,
            params: {
                nameOrNo: '',
                status: '',
                classId: '',
                pageNum: 1,
                pageSize: 10,
                total: 0

            },
            list: [],
            columns: Object.freeze([
                { title: '序号', type: 'index', align: 'center', width: 80 },
                { title: '学生姓名', key: 'realName', align: 'center' },
                { title: '学生学号', key: 'userNo', align: 'center' },
                { title: '考试状态', slot: 'status', align: 'center' },
                { title: '作答进度', key: 'progress', align: 'center' },
                { title: '客观题得分', key: 'objectiveScore', align: 'center' },
                { title: '主观题得分', key: 'subjectiveScore', align: 'center' },
                { title: '总得分', key: 'scores', align: 'center' },
                { title: '操作', slot: 'action', align: 'center', width: 120 }
            ])
        }
    },
    created () {
        this.queryList()
    },
    methods: {
        search () {
            this.params.pageNum = 1
            this.queryList()
        },
        queryList () {
            let id = this.$route.query.id
            let params = {
                classId: this.params.classId,
                examId: id,
                nameOrNo: this.params.nameOrNo,
                status: this.params.status,
                pageNum: this.params.pageNum,
                pageSize: this.params.pageSize
            }
            getExamDetail(params).then(res => {
                // 基本信息
                this.one = res.data.data.examListDto
                this.classList = res.data.data.classList
                this.list = res.data.data.infoList.list
                this.params.total = this.list.total
                // this.form.dateValue = [this.form.startTime,this.form.endTime];
            })
        },
        clearSearch () {},
        handleView (row) {
            console.log(row)
            this.nextPageReload()
            this.$router.push({
                name: 'examRead',
                query: {
                    id: this.one.examId,
                    type: 3,
                    examName: this.one.examName,
                    stuId: row.stuId,
                    userNo: row.userNo,
                    realName: row.realName
                }
            })
        },
        handleStop (row) {
            this.$Modal.confirm({
                title: '强制收卷',
                content: '强制收卷后，学生不可再做答，确认是否强制收卷？',
                onOk: () => {
                    let params = {
                        examId: this.$route.query.id,
                        stuId: row.stuId
                    }
                    forceExam(params).then(res => {
                        if (res.data.code != '0000') {
                            this.$Message.error(res.data.data)
                            return
                        }
                        this.$Message.success('已强制收卷')
                    })
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.student-list {
    margin-top: 10px;
}
</style>
